Vue 3 Development with the PrimeVue Framework — Split Button and Table

PrimeVue is a UI framework that’s compatible with Vue 3.

In this article, we’ll look at how to get started with developing Vue 3 apps with PrimeVue.

Split Buttons

We can add split buttons with the SplitButton component.

For instance, we can write:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import SplitButton from 'primevue/splitbutton';
import 'primevue/resources/primevue.min.css'
import 'primevue/resources/themes/saga-blue/theme.css'
import 'primeicons/primeicons.css'
import 'primeflex/primeflex.css';

const app = createApp(App);
app.use(PrimeVue);
app.component("SplitButton", SplitButton);
app.mount("#app");

App.vue

<template>
  <div>
    <SplitButton label="Save" icon="pi pi-plus" :model="items"></SplitButton>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      items: [
        {
          label: "Update",
          icon: "pi pi-refresh",
          command: () => {
            alert("updated");
          },
        },
        {
          label: "Delete",
          icon: "pi pi-times",
          command: () => {
            alert("deleted");
          },
        },
      ],
    };
  },
  methods: {},
};
</script>

We add the items for the split button dropdown into the items array.

label has the label text for the dropdown item.

icon has the icon classes for the dropdown item.

command is set to a function that’s run when we click on the dropdown item.

We set items as the value of models to display the dropdown items.

label has the label text.

The icon prop has the icon classes.

We can also add one of the following classes to change the button styles:

• .p-button-secondary
• .p-button-success
• .p-button-info
• .p-button-warning
• .p-button-help
• .p-button-danger

Data Table

We can add a basic table into our Vue 3 app with PrimeVue’s DataTable and Column components.

For instance, we can write:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import DataTable from 'primevue/datatable';
import Column from 'primevue/column';
import ColumnGroup from 'primevue/columngroup';
import 'primevue/resources/primevue.min.css'
import 'primevue/resources/themes/saga-blue/theme.css'
import 'primeicons/primeicons.css'
import 'primeflex/primeflex.css';

const app = createApp(App);
app.use(PrimeVue);
app.component("DataTable", DataTable);
app.component("Column", Column);
app.component("ColumnGroup", ColumnGroup);
app.mount("#app");

App.vue

<template>
  <div>
    <DataTable :value="cars">
      <Column field="vin" header="Vin"></Column>
      <Column field="year" header="Year"></Column>
      <Column field="brand" header="Brand"></Column>
      <Column field="color" header="Color"></Column>
    </DataTable>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      cars: [
        { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" },
        { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
        { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
      ],
    };
  },
  methods: {},
};
</script>

We have the cars array which set as the value of the value prop.

Then we display the column data with the Column component.

field has the property name of the cars array entry to display.

header has the corresponding column heading to display to the user.

We can customize how column data are displayed by populating the body slot of the Column component:

<template>
  <div>
    <DataTable :value="cars">
      <Column field="vin" header="Vin">
        <template #body="slotProps">
          <b>{{ slotProps.data.vin }}</b>
        </template>
      </Column>
      <Column field="year" header="Year"></Column>
      <Column field="brand" header="Brand"></Column>
      <Column field="color" header="Color"></Column>
    </DataTable>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      cars: [
        { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" },
        { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
        { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
      ],
    };
  },
  methods: {},
};
</script>

We get the entry’s data with the slotProps.data property.

Conclusion

We can add split buttons and basic tables into our Vue 3 app with PrimeVue.